<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page language="java" import="com.zz.personmodel.Employee"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>人员信息管理系统</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="" type="text/css" rel="stylesheet">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet"
	media="screen" />
<link href="css/styles.css" type="text/css" rel="stylesheet"
	media="screen">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet"
	media="screen">
<script src="js/updateemployee.js"></script>
<script src="js/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<link href="vendors/datepicker.css" rel="stylesheet" media="screen">
<link href="vendors/uniform.default.css" rel="stylesheet" media="screen">
<link href="vendors/chosen.min.css" rel="stylesheet" media="screen">

<link href="vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet"
	media="screen">
<script src="vendors/jquery-1.9.1.js"></script>
<script src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/jquery.poshytip.js"></script>
<script type='text/javascript' src='js/jq.validate.js'></script>
<script src="vendors/jquery.uniform.min.js"></script>
<script src="vendors/chosen.jquery.min.js"></script>
<script src="vendors/bootstrap-datepicker.js"></script>

<script src="vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
<script src="vendors/wysiwyg/bootstrap-wysihtml5.js"></script>

<script src="vendors/wizard/jquery.bootstrap.wizard.min.js"></script>

<script type="text/javascript"
	src="vendors/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="assets/form-validation.js"></script>
<script src="js/select.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/Validation.js"></script>
<script
	src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="js/ecc.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet">
<style type="text/css">
#xiaoshi {
	display: none;
}
.pagenumber{
padding-left: 85px;
}
#addbutton {
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #006dcc;
	background-image: linear-gradient(to bottom, #08c, #04c);
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	background-repeat: repeat-x;
	display: inline-block;
	padding: 4px 12px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 20px;
}
.message{
color:red;
}
<!--
把表的id隐藏
-->#center_b {
	text-align: center;
	width: 100%;
	height: 100%;
	margin: 0px;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
	<%
		//数据校验
		String message = "";
		String deletVerify = (String) request.getAttribute("deleteVerify");
		String addVerify = (String) request.getAttribute("addVerify");
		String updateVerify = (String) request.getAttribute("updateVerify");
		String findVerify = (String) request.getAttribute("findVerify");
		String NullVerify = (String) request.getAttribute("NullVerify");
		if (deletVerify != null) {
			message = deletVerify;
		} else if (addVerify != null) {
			message = addVerify;
		} else if (updateVerify != null) {
			message = updateVerify;
		} else if (findVerify != null) {
			message = findVerify;
		} else if (NullVerify != null) {
			message = NullVerify;
		}
	%>
	<font color="red" size="4px"><b><%=message%></b></font>
	<font color="red" size="4px"><b>${message}</b></font>
	<!-- 修改模态窗口 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content" id="myModal">
				<div class="modal-header">
					<button type="button" class="close" 
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">修改</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal" action="updateemployee.do"
						method="post" >
						<fieldset>
							<div class="xiaoshi" id="xiaoshi">
								<label class="control-label" for="focusedInput">id</label>
								<div class="controls">
									<input class="input-xlarge focused" id="id" name="id"
										type="text">
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="focusedInput">姓名</label>
								<div class="controls">
									<input class="input-xlarge focused" id="person_name"
										name="person_name" type="text" onchange="checkname()">
										<p class="message" id="checktext1"></p>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="focusedInput">身份证号码</label>
								<div class="controls">
									<input class="input-xlarge focused" id="identity_number"
										name="identity_number" type="text" onchange="checkidnu()" maxlength="18" />
										<p class="message" id="checktext2"></p>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="focusedInput">性别</label>
								<div class="controls">
									<select name="sex" id="sex">
										<option id="man" value="1">男</option>
										<option id="women" value="2">女</option>
									</select>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="focusedInput">婚姻状况</label>
								<div class="controls">
									<select name="matital_status" id="matital_status">
										<option id="10" value="10">未婚</option>
										<option id="21" value="21">初婚 </option>
										<option id="22" value="22">再婚 </option>
										<option id="23" value="23">复婚</option>
										<option id="30" value="30">丧偶</option>
										<option id="40" value="40">离婚</option>
										<option id="90" value="未说明的婚姻状况">未说明的婚姻状况</option>
									</select>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="focusedInput">出生日期</label>
								<div class="controls">
									<input type="text" name="birth_time" id="birth_time" onchange="checkbirth()"/>
									<p class="message" id="checktext3"></p>
								</div>
							</div>
							<div class="control-group">
								<label class="control-label" for="focusedInput">配偶姓名</label>
								<div class="controls">
									<input class="input-xlarge focused" id="spouse_name"
										name="spouse_name" type="text" onchange="checksp" />
									<p class="message" id="checktext4"></p>
								</div>
							</div>
							<div class="modal-footer">
								<input type="submit" class="btn btn-default" id="submit" value="修改"/>
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
							</div>
						</fieldset>
					</form>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal 添加模态窗口-->
	<div class="row-fluid section">
		<!-- block -->
		<div class="block">
			<div class="navbar navbar-inner block-header">
				<div class="muted pull-left">人員信息管理</div>
			</div>
			<div class="block-content collapse in">
				<div class="span12">
					<div id="rootwizard">
						<div class="navbar">
							<div class="navbar-inner">
								<div class="container">
									<ul>
										<li><a href="#tab1" data-toggle="tab">查詢</a></li>
									</ul>
								</div>
							</div>
						</div>
						<div id="bar" class="progress progress-striped active">
							<div class="bar"></div>
						</div>
						<div class="tab-content">
							<div class="tab-pane" id="tab1">
								<form class="form-horizontal" action="findemployeeView.do"
									method="post">
									<fieldset>
										<input type="hidden" name="page" value="0">
										<div class="control-group">
											<label class="control-label" for="focusedInput">姓名:</label>
											<div class="controls">
												<input class="input-xlarge focused" id="person_name"
													type="text" name="person_name" value="">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="focusedInput">出身年份:</label>
											<div class="controls">
												<input class="input-xlarge focused" id="birth_time"
													type="text" name="birth_time" value="">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="focusedInput">身份证号码：</label>
											<div class="controls">
												<input class="input-xlarge focused" id="identity_number"
													type="text" name="identity_number" value="">
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="focusedInput">性別</label>
											<div class="controls">
												<input class="input-xlarge focused" id="no" type="radio"
													name="gender" value="0">未知性别 <input
													class="input-xlarge focused" id="man" type="radio"
													name="gender" value="1">男<input
													class="input-xlarge focused" id="women" type="radio"
													name="gender" value="2">女 <input
													class="input-xlarge focused" id="nosay" type="radio"
													name="gender" value="9">未说明性别
											</div>
										</div>
										<div
											style="text-align: center; width: 70%; height: 100%; margin: 0px;">
											<input class="btn btn-primary btn-lg" type="submit"
												value="查詢" id="selected">
										</div>
									</fieldset>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- /block -->
		</div>
	</div>
	<table width=100%
		class="table table-condensed table table-striped table-bordered table-hover"
		id="table">
		<thead>
			<tr>
				<td id="xiaoshi">id</td>
				<td>姓名</td>
				<td>创建时间</td>
				<td>修改时间</td>
				<td>性別</td>
				<td>生日</td>
				<td>身份证号</td>
				<td>婚姻状况</td>
				<td>配偶姓名</td>
				<td><a  type="button" href="addemployee.jsp"
					class="btn btn-primary btn-lg"  onclick="window.open(this.href);return false"
					 >添加</a></td>
				<!-- 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，
		同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
                        通过 JavaScript：使用这种技术，可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：$('#identifier').modal(options)  -->
			</tr>
		</thead>
		<c:forEach var="plist" items="${slist}" varStatus="vs">
			<tbody>
				<tr>
					<td id="xiaoshi">${plist.id}</td>
					<td>${plist.person_name}</td>
					<td>${plist.create_time}</td>
					<td>${plist.laste_update_time}</td>
					<td>${plist.gender}</td>
					<td>${plist.birth_time.toString().replace("00:00:00.0","")}</td>
					<td>${plist.identity_number}</td>
					<td>${plist.matital_status}</td>
					<td>${plist.spouse_name}</td>
					<!-- 按钮触发模态框 -->
					<td><input type="button" id="addbutton" class="delete"
						em_id="${plist.id}" value="删除" /> <input data-toggle="modal"
						data-target="#myModal" class="btn btn-primary btn-lg"
						type="button" id="${vs.index+1}" value="修改"
						onclick="editInfo(this)" /> <!-- ${status.index}      输出行号，从0开始。
                             ${status.count}      输出行号，从1开始。
                             ${status.current}   当前这次迭代的（集合中的）项 -->
				</tr>
			</tbody>
			
		</c:forEach>
		<div>
		<a id="first" href="findemployeeView.do?person_name=${person_name}&birth_time=${birth_time}&gender=${gender}&identity_number=${identity_number}&page=${0}">首頁</a>
		<a id="previous" href="findemployeeView.do?person_name=${person_name}&birth_time=${birth_time}&gender=${gender}&identity_number=${identity_number}&page=${page-4}">上一页</a>
        <a id="next" href="findemployeeView.do.do?person_name=${person_name}&birth_time=${birth_time}&gender=${gender}&identity_number=${identity_number}&page=${page+4}">下一页></a>
        <a id="last" href="findemployeeView.do.do?person_name=${person_name}&birth_time=${birth_time}&gender=${gender}&identity_number=${identity_number}&page=${pages*4}">末頁></a>
		</div>
		 <div class="pagenumber">${pa+1}/${pages+1}页<div>
		<script>
			jQuery(document).ready(function() {
				FormValidation.init();
			});
			$(function() {
						var pa="${pa+1}";
						var pages="${pages}";
						if(pa==1){
						$("#first").hide();
						$("#previous").hide();	
						}
						if(pa>pages){
							$("#last").hide();
							$("#next").hide();
						}
				$(".datepicker").datepicker();
				$(".uniform_on").uniform();
				$(".chzn-select").chosen();
				$('.textarea').wysihtml5();
				$('#rootwizard').bootstrapWizard(
						{
							onTabShow : function(tab, navigation, index) {
								var $total = navigation.find('li').length;
								var $current = index + 1;
								var $percent = ($current / $total) * 100;
								$('#rootwizard').find('.bar').css({
									width : $percent + '%'
								});
								// If it's the last tab then hide the last button and show the finish instead
								if ($current >= $total) {
									$('#rootwizard').find('.pager .next')
											.hide();
									$('#rootwizard').find('.pager .finish')
											.show();
									$('#rootwizard').find('.pager .finish')
											.removeClass('disabled');
								} else {
									$('#rootwizard').find('.pager .next')
											.show();
									$('#rootwizard').find('.pager .finish')
											.hide();
								}
							}
						});
				$('#rootwizard .finish').click(function() {
					alert('Finished!, Starting over!');
					$('#rootwizard').find("a[href*='tab1']").trigger('click');
				});
			});
		</script>
</body>
</html>